<template>
    <ul class="list">
      <!--使用v-for来循环对象-->
      <!--axios接受到的所有数据是一个大的对象，该对象里面有许多数组-->
      <!--touchstart 手指触摸屏幕时触发，即使已经有手指在屏幕上也会触发。-->
      <!--touchmove 手指在屏幕滑动时触发-->
      <!--touchend 手指从屏幕时移开时触发-->
      <li class="item"
          v-for="(item, key) in city"
          :key="key"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
          @click="handleLetterClick">
        {{key}}
      </li>
    </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    city: {}
  },
  data () {
    return {
      touchStatus: false
    }
  },
  methods: {
    /* 该函数获取点击后的字母 */
    /* 整体思路是Alphabet将数据传递给City,City再通过父子组件传值给List */
    /* 当用户点击字母时，触发handleLetterClick函数，且将e传入 */
    /* handleLetterClick函数的作用是接受传入的e数值，并触发change事件 */
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
      /* console.log(e.target.innerText) */
    },
    handleTouchStart () {
      /* 当手指放上去准备滑动时，改变touchStatus的状态 */
      this.touchStatus = true
    },
    handleTouchMove () {
    },
    handleTouchEnd () {
      this.touchStatus = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/commStyle.styl"
.list
  display: flex
  flex-direction: column
  justify-content: center
  text-align: center
  position: absolute
  top: 3rem
  right: 0
  bottom: 0
  font-size: large
  .item
    color: $bgColor
    margin-bottom: .02rem
</style>
